<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three test6-1 纹理</title>
    <script src="three.js"></script>
    <style>
        body{
            margin:0;
            padding:0;
            overflow: hidden;
        }
    </style>
</head>
<body>
</body>
<script>
    var renderer,camera,scene,mesh;

    init();
    animate();
    function init(){
        renderer=new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        //摄像机
        camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,1000);
        camera.position.z=400;
        //场景
        scene=new THREE.Scene();
        //物体
        var geometry=new THREE.PlaneGeometry(500,300,1,1);
        geometry.vertices[0].uv=new THREE.Vector2(0,0);
        geometry.vertices[1].uv=new THREE.Vector2(2,0);
        geometry.vertices[2].uv=new THREE.Vector2(2,2);
        geometry.vertices[3].uv=new THREE.Vector2(0,2);

        var texture=THREE.ImageUtils.loadTexture('textures/2.jpg',null,function(t){

        });
        var material=new THREE.MeshBasicMaterial({map:texture});
        var mesh=new THREE.Mesh(geometry,material);
        scene.add(mesh);

        window.addEventListener('resize',onWindowResize,false);
    }

    function onWindowResize(){
        camera.aspect=window.innerWidth/window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth,window.innerHeight);
    }

    function animate(){
        requestAnimationFrame(animate);
        renderer.render(scene,camera);
    }
</script>
</html>